<template>
  <view>
    <!--课程开始 -->
    <view class="uni-panel">
      <view
        class="uni-panel-h flex justify-between"
        :class="courseOpen ? 'uni-panel-h-on' : ''"
        @click="triggerCourse()"
      >
        <view>
          <text class="uni-panel-text">
            <text class="cuIcon-title text-orange"></text>我关注的课程
          </text>
        </view>
        <view>
          <text>{{courseList.length}}/{{courseList.length}}</text>
          <text
            class="uni-panel-icon uni-icon"
            :class="courseOpen? 'uni-panel-icon-on' : ''"
          >{{courseOpen ? '&#xe581;' : '&#xe470;'}}</text>
        </view>
      </view>

      <!-- 课程 -->
      <view v-if="courseOpen">
        <block v-for="(item,index) in courseList" :key="index">
          <courseList :item="item" :index="index"></courseList>
        </block>
      </view>
    </view>
    <!--相关课程结束-->

    <!--打卡开始 -->
    <view class="uni-panel">
      <view
        class="uni-panel-h flex justify-between"
        :class="taskOpen ? 'uni-panel-h-on' : ''"
        @click="triggerTask()"
      >
        <view>
          <text class="uni-panel-text">
            <text class="cuIcon-title text-orange"></text>我关注的打卡
          </text>
        </view>
        <view>
          <text>{{taskList.length}}/{{taskList.length}}</text>
          <text
            class="uni-panel-icon uni-icon"
            :class="taskOpen? 'uni-panel-icon-on' : ''"
          >{{taskOpen ? '&#xe581;' : '&#xe470;'}}</text>
        </view>
      </view>

      <!-- 打卡 -->
      <view v-if="taskOpen">
        <block v-for="(item, index) in taskList" :key="index">
          <my-clock-in :item="item" :Fav="true"></my-clock-in>
        </block>
      </view>
    </view>
    <!--相关打卡结束-->

    <!--活动开始 -->
    <view class="uni-panel">
      <view
        class="uni-panel-h flex justify-between"
        :class="actOpen ? 'uni-panel-h-on' : ''"
        @click="triggerAct()"
      >
        <view>
          <text class="uni-panel-text">
            <text class="cuIcon-title text-orange"></text>我关注的活动
          </text>
        </view>
        <view>
          <text>{{activitiesList.length}}/{{activitiesList.length}}</text>
          <text
            class="uni-panel-icon uni-icon"
            :class="actOpen? 'uni-panel-icon-on' : ''"
          >{{actOpen ? '&#xe581;' : '&#xe470;'}}</text>
        </view>
      </view>

      <!-- 活动 -->
      <view v-if="actOpen">
        <my-activities-list :list="activitiesList"></my-activities-list>
      </view>
    </view>
    <!--相关活动结束-->
  </view>
</template>

<script>
import uniFab from "../../../component/uniFab.vue";
import courseList from "../../../component/courseList.vue";
import myClockIn from "../../../component/myClockIn.vue";
import myActivitiesList from "../../../component/myActivitiesList.vue";
import { uniCard } from "@dcloudio/uni-ui";
import moment from "moment";
moment.locale("zh-cn");
export default {
  components: {
    uniFab,
    uniCard,
    courseList,
    myClockIn,
    myActivitiesList
  },
  data() {
    return {
      courseOpen: false,
      taskOpen: false,
      actOpen: false,
      taskList: [],
      courseList: [],
      activitiesList: []
    };
  },
  methods: {
    triggerCourse() {
      this.courseOpen = !this.courseOpen;
    },
    triggerTask() {
      this.taskOpen = !this.taskOpen;
    },
    triggerAct() {
      this.actOpen = !this.actOpen;
    },
    getTask() {
      this.request({
        url:
          this.apiServer +
          "/follow/findMyFollowTasksByUId?uId=" +
          uni.getStorageSync("user").id
      }).then(res => {
        console.log("--------------getTask");
        console.log(res);
        this.taskList = res.data;
      });
    },
    getAct() {
      this.request({
        url:
          this.apiServer +
          "/follow/findMyFollowActivitiesByUId?uId=" +
          uni.getStorageSync("user").id
      }).then(res => {
        console.log("--------------getAct");
        console.log(res);
        res.data.forEach(v => {
          v.createTime = moment(v.createTime).format("YYYY-MM-DD");
        });
        this.activitiesList = res.data;
      }).then(res=>{
        this.getCourse();
      }).then(res=>{
        this.getTask();
      });
    },
    getCourse() {
      this.request({
        url:
          this.apiServer +
          "/follow/findMyFollowCoursesByUId?uId=" +
          uni.getStorageSync("user").id
      }).then(res => {
        console.log("--------------getCourse");
        console.log(res);
        this.courseList = res.data;
      });
    }
  },
  onLoad() {
    this.getAct();
    // this.getCourse();
    // this.getTask();
  }
};
</script>

<style>
.uni-panel {
  margin-bottom: 12px;
}
.uni-icon {
  font-family: uniicons;
  font-weight: normal;
}
.uni-panel-h {
  background-color: #ffffff;
  flex-direction: row;
  align-items: center;
  padding: 12px;
}
/*
.uni-panel-h:active {
    background-color: #f8f8f8;
}
 */
.uni-panel-h-on {
  background-color: #f0f0f0;
}

.uni-panel-text {
  flex: 1;
  color: #000000;
  font-size: 14px;
  font-weight: normal;
}

.uni-panel-icon {
  margin-left: 15px;
  color: #999999;
  font-size: 14px;
  font-weight: normal;
  transform: rotate(0deg);
  transition-duration: 0s;
  transition-property: transform;
}

.uni-panel-icon-on {
  transform: rotate(180deg);
}

.uni-navigate-item {
  flex-direction: row;
  align-items: center;
  background-color: #ffffff;
  border-top-style: solid;
  border-top-color: #f0f0f0;
  border-top-width: 1px;
  padding: 12px;
}

.uni-navigate-item:active {
  background-color: #f8f8f8;
}

.uni-navigate-text {
  flex: 1;
  color: #000000;
  font-size: 14px;
  font-weight: normal;
}

.uni-navigate-icon {
  margin-left: 15px;
  color: #999999;
  font-size: 14px;
  font-weight: normal;
}
</style>
